<template>
  <div class="box">
    <el-input
      v-model="input"
      placeholder="根据用户名搜索"
      size="small"
    ></el-input>
    <el-row>
      <el-button size="small" @click="empty">清空</el-button>
      <el-button type="primary" size="small" @click="search">搜索</el-button>
      <el-button
        type="success"
        size="small"
        icon="el-icon-edit"
        class="added"
        @click="added"
        >新增权限组</el-button
      >
    </el-row>
    <div class="record">
      <i class="el-icon-info"></i>
      <span>共 {{ unm }} 条记录</span>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="title" label="用户名" align="center" width="550px">
      </el-table-column>
      <el-table-column
        prop="create_date"
        label="日期"
        align="left"
        width="500px"
        sortable
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            circle
            @click="handleEdit(scope.row)"
            icon="el-icon-edit"
            v-show="scope.row.username !== '超级管理员'"
          ></el-button>
          <el-button
            type="danger"
            plain
            circle
            @click="handleDelete(scope.row)"
            icon="el-icon-delete"
            v-show="scope.row.username !== '超级管理员'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="butt">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="obj.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout=" prev, pager, next, sizes, jumper"
        :total="unm"
        style="margin-right: -200px"
      >
      </el-pagination>
    </div>
    <usersAdd ref="usersAdd" :text="text"></usersAdd>
  </div>
</template>

<script>
import usersAdd from '@/module-manage/components/permissions-add'
import { list, remove } from '@/api/base/permissions.js'
export default {
  components: {
    usersAdd
  },
  data () {
    return {
      text: '',
      input: '',
      unm: 1,
      obj: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      currentPage: ''
    }
  },

  async created () {
    this.getList()
  },

  methods: {
    // 删除用户信息
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          remove(row)
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增用户
    added () {
      this.text = '创建权限组'
      this.$refs.usersAdd.dialogFormV()
    },
    // 发送请求获取数据
    async getList () {
      console.log(this.obj)
      const data = await list(this.obj)
      this.unm = data.data.counts

      this.tableData = data.data.list.filter(item => {
        item.create_date = item.create_date.substring(0, 10)
        return item.create_date
      })
    },
    // 点击清空
    empty () {
      this.input = ''
      this.getList()
    },
    // 点击筛选搜索
    async search () {
      const data = await list(this.obj)
      if (this.input) {
        this.tableData = data.data.list.filter(item => {
          item.create_date = item.create_date.substring(0, 10)
          return item.title === this.input
        })
      } else {
        this.tableData = data.data.list
      }
    },
    // 选择多少条每页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.obj.page = 1
      this.obj.pagesize = val
      this.getList()
    },
    // 选择第几页
    handleCurrentChange (val) {
      this.obj.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
.butt {
  margin: 20px;
  text-align: right;
  margin-right: 220px;
  padding-bottom: 20px;
}
.el-table {
  padding: 0 20px;
}
.record {
  width: 1260px;
  height: 40px;
  border-radius: 4px;
  line-height: 40px;
  margin: 20px auto;
  background-color: #f4f4f5;
  font-size: 14px;
  color: #ccc;
  span {
    margin-left: 10px;
  }
  .el-icon-info {
    font-size: 15px;
    color: #909399;
    margin-left: 15px;
  }
}
.added {
  margin-left: 810px;
}
.box {
  width: 1300px;
  // height: 600px;
  margin: 20px 20px;
  border-radius: 5px;
  background-color: #fff;
}
.el-input {
  width: 200px;
  margin-top: 20px;
  margin-left: 20px;
}
.el-row {
  margin-top: -32px;
  margin-left: 235px;
}
</style>
